import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
import { Fragment } from "react";

type MenuOptionRenderProps = {
  isSelected: boolean;
  onSelect: () => void;
  onSetHighlight: () => void;
  queryString: string | null;
};

export class VarOption extends MenuOption {
  private _ref: HTMLElement | null = null;

  public label: string;
  public description: string;
  public onSelectMenuOption = () => this.data.onSelect?.();
  public renderMenuOption = (menuRenderProps: MenuOptionRenderProps) => (
    <Fragment key={this.data.key}>{this.data.render(menuRenderProps)}</Fragment>
  );

  constructor(
    private data: {
      key: string;
      label: string;
      description: string;
      onSelect?: () => void;
      render: (menuRenderProps: MenuOptionRenderProps) => React.JSX.Element;
    },
  ) {
    super(data.key);
    this.label = data.label;
    this.description = data.description;
  }
  setRefElement = (element: HTMLElement | null) => {
    this._ref = element;
  };
  getRefElement = () => this._ref;
}
